import { useState, useEffect, useLayoutEffect } from 'react';
import qs from 'qs';
import { Popover, Collapse } from 'antd';
import { useField, useFieldSchema } from '@formily/react';
import { Schema, SchemaKey } from '@formily/json-schema';
import { TextWidget, getMessage, useLayouts } from '@inbiz/react';
import {
  getIconStyle,
  InbizIcon,
  getEditor,
  deepClone,
  getHashArr,
  getDomain,
  getDomainType,
  h5Utils,
} from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import { useApp, useGetMenuTreeEffect, usePagePropertyByLayoutInfo } from '@inbiz/render';
import { routerPrefix } from 'InbizConfig';
import './common.less';

// 窗体变化hooks
export function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

// hover效果公共方法
export const getIsHover = (route: string) => {
  if (!route) {
    return false;
  }
  const routeArr = route.split('/');
  let routeString = route;
  if (routeArr.length > 1) {
    routeString = routeArr[routeArr.length - 1];
  }
  const hashs = getHashArr();
  const isSelect = hashs.includes(routeString);
  return isSelect;
};

// 获取右侧容器
export const useRigbox = (emit: any) => {
  if (!emit) {
    return null;
  }
  const rightBoxField = useField();
  const schema = useFieldSchema();
  let RightBox: { name: SchemaKey; props: any; schema: Schema } | any = null;
  schema.mapProperties((schema, name) => {
    const field = rightBoxField.query(rightBoxField.address.concat(name)).take();
    if (field?.display === 'none' || field?.display === 'hidden') return;
    if (schema['x-component']?.indexOf('VerticalMenu.Plugin') > -1) {
      if (!RightBox) {
        RightBox = {
          name,
          props: {
            ...schema?.['x-component-props'],
            key: schema?.['x-component-props']?.key || name,
          },
          schema,
        };
      }
    }
  });
  return RightBox;
};

// 图标处理
export const tranferIcon = (icoData: any) => {
  let icon = {};
  try {
    icon = JSON.parse(icoData, (key, value) => {
      if (!value) {
        return '';
      } else {
        return value;
      }
    });
  } catch (e) { }
  return icon;
};

// 菜单样式统一修改函数 暂时未用
export const changeByHover = (nowItem: any, inbizMenu?: any) => {
  let menuData = inbizMenu ? inbizMenu.val : nowItem.menu.val;
  menuData.map((item: MenuType) => {
    if (item.OutId == nowItem.OutId) {
      item.isSelect = true;
    } else {
      item.isSelect = false;
    }
    if (item.children) {
      item.children.map((item2) => {
        if (item2.OutId == nowItem.OutId) {
          item.isSelect = true;

          item2.isSelect = true;
        } else {
          item2.isSelect = false;
        }

        if (item2.children) {
          item2.children.map((item3) => {
            if (item3.OutId == nowItem.OutId) {
              item.isSelect = true;
              item2.isSelect = true;
              item3.isSelect = true;
            } else {
              item3.isSelect = false;
            }
          });
        }
      });
    }
    return item;
  });
  if (inbizMenu) {
    inbizMenu.set(deepClone(menuData));
  } else {
    nowItem.menu.set(menuData);
  }
};

// 子级组合
export const joinChild = (nowItem: any, children?: MenuType[] | undefined) => {
  let menuData = nowItem.inbizMenu.val;
  menuData.map((item: MenuType) => {
    if (item.OutId == nowItem.OutId) {
      if (children) item.children = children;
      item.isSelect = true;
    } else {
      item.isSelect = false;
    }
    if (item.children) {
      item.children.map((item2) => {
        if (item2.OutId == nowItem.OutId) {
          item.isSelect = true;
          if (children) item2.children = children;
          item2.isSelect = true;
        } else {
          item2.isSelect = false;
        }

        if (item2.children) {
          item2.children.map((item3) => {
            if (item3.OutId == nowItem.OutId) {
              item.isSelect = true;
              item2.isSelect = true;
              if (children) item3.children = children;
              item3.isSelect = true;
            } else {
              item3.isSelect = false;
            }
          });
        }
      });
    }
    return item;
  });
  nowItem.inbizMenu.set(deepClone(menuData));
};

// 搜索框负责的hover效果用原生简化问题
export const clearHover = () => {
  const allMenu = document.querySelectorAll('.edocMenu-collMenuHeader');
  allMenu.forEach((item) => {
    item.setAttribute('class', 'edocMenu-collMenuHeader');
  });
};

//@ts-ignore
let globalTimer = window.timer;
export const windowTimer = ({ fn, time }: { fn: Function; time: number }) => {
  if (globalTimer) clearTimeout(globalTimer);
  globalTimer = setTimeout(() => {
    fn();
    clearTimeout(globalTimer);
  }, time);
  return;
};

export interface MenuType {
  DataVersionId: string;
  DisplayName: string;
  Icon?: string;
  IsHaveChild: boolean;
  IsHomePage?: boolean;
  IsInternalLink?: boolean;
  IsTopNode?: boolean;
  LinkUrl?: string;
  Route: string;
  JumpRoute: string;
  OutId: string;
  ParentId?: string;
  Sort?: number;
  loadChildList?: any;
  placement?: any;
  inlineCollapsed?: any;
  showLevel: string[];
  jumpChild?: boolean;
  children?: MenuType[];
  menuOnClick?: Function;
  isSelect?: boolean;
  menu: {
    val: MenuType[];
    set: Function;
  };
  style?: any;
  isPre?: boolean;
  level: number;
  isRight: boolean;
  isCollapse?: boolean;
  iscolumn: boolean;
  visible?: boolean;
  companentLevel: number;
  inbizMenu?: MenuType[];
}

export interface EdocMenuType {
  iscolumn?: boolean; //是否竖向
  isCollapse?: boolean; //手风琴
  inlineCollapsed?: boolean; //是否折叠
  showLevel: string[]; //菜单展示得层级
  emit: any; //继承得inbiz扩展代码得能力,事件发射器
  inbiz: any; //inbizData
  menuData: {
    val: MenuType[];
    set: Function;
  }; //菜单一级数组
  moreMenu?: MenuType[]; //更多菜单
  menustyle?: string; //更多菜单
  viewtype?: string; //菜单方向
  mainmenu: boolean; //是否主菜单
  jumpChild: boolean; //是否默认跳转子菜单第一个
}

/**菜单公共组装组件
 *
 * **/
export const EdocMenu = (props: EdocMenuType) => {
  const {
    iscolumn,
    inlineCollapsed,
    showLevel,
    jumpChild,
    menustyle,
    mainmenu,
    viewtype,
    isCollapse,
    inbiz
  } = props;
  const appInfo = useApp();
  const history = useInbizRouter();
  const { appInfo: { aliveController } } = inbiz;
  const requestMenu = useGetMenuTreeEffect();
  const tagsViews = useLayouts('TagsView');
  const { findCompants } = usePagePropertyByLayoutInfo('TagsView');
  const menuCookieName = `${appInfo?.userInfo?.guid}-${getDomainType()}-${getDomain()}`;

  const routerMatch = window.location;

  // 只展示1级
  const isSelectOne = showLevel?.length === 1 && showLevel[0] === '1';

  const menuOnClick = (item: any) => {

    // 若是设计器场景屏蔽点击
    if (getEditor()) {
      return;
    }

    props?.emit('MenuClick', item);
    if (isSelectOne) {
      // 是否存在子级
      if (item.IsHaveChild) {
        requestMenu((res: MenuType[]) => {

          let newRes: MenuType[] = res.map((newItem) => {
            if (!newItem.JumpRoute) {
              newItem.JumpRoute = newItem.Route;
            }
            newItem.JumpRoute = newItem.JumpRoute
              ? `${item.JumpRoute}/${newItem.JumpRoute}`
              : newItem.JumpRoute;
            return newItem;
          });

          // 默认跳转子级
          if (jumpChild) {
            goNewPage(res[0]);
          } else {
            goNewPage(item);
          }

          props?.emit('onvmenu', newRes || []);
        }, item.OutId);
      } else {

        goNewPage(item);
        props?.emit('onvmenu', []);
      }
    } else {
      if (item.IsHaveChild) {
        return;
      }
      goNewPage(item);
    }
  };

  // 跳转
  const goNewPage = (item: any) => {
    let search = qs.parse(routerMatch.search.replace('?', ''));
    search = {
      ...search,
    };
    let url = item.JumpRoute
      ? item.JumpRoute.includes('/page/')
        ? `${routerPrefix}menu/${item.JumpRoute}`
        : `${routerPrefix}${item.JumpRoute}`
      : `${routerPrefix}/notfound`;

    // 内部地址跳转
    if (item.IsInternalLink) {
      let tags = JSON.parse(sessionStorage.getItem(menuCookieName) || '[]');

      // 若存在页签组件
      if (tagsViews.length > 0 || findCompants.length > 0) {
        const nowRoute = item.Route;
        const cacheItem = tags.find((nemu: any) => nemu.key === nowRoute);
        if (!cacheItem) {
          aliveController?.refresh?.(item.Route);
        }
      } else {
        aliveController?.refresh?.(item.Route);
      }

      if (item.OpenType === 0) {
        history.push(url);
      } else {
        const { origin, search, pathname } = location;
        window.open(`${origin}${pathname}${search}#${url}`);
      }
    } else {

      // 绑定了自定义地址
      if (item.LinkUrl) {
        if (item.OpenType === 0) {
          history.push(url);
        } else {
          const linkUrl: string = item.LinkUrl.trim();
          //若是完整地址直接跳转，非完整地址当主服务器地址做跳转
          if (item.LinkUrl.indexOf('http') === 0) {
            window.open(`${linkUrl}`);
          } else {
            const zeroString = linkUrl.charAt(0);
            // 判断首字符
            if (zeroString === '\/') {
              window.open(`${location.origin}${linkUrl}`);
              return
            }
            window.open(`${location.origin}/${item.LinkUrl.trim()}`);
          }
        }
      } else {
        console.log('没有绑定页面');
      }
    }

  };

  // 通过下列参数获取菜单
  const renderProps = {
    menu: props.menuData,
    inbizMenu: props.menuData,
    isRight: iscolumn,
    iscolumn: iscolumn,
    inlineCollapsed,
    menuOnClick: menuOnClick,
    jumpChild: jumpChild,
    menustyle: menustyle,
    showLevel,
    level: mainmenu ? 1 : 2,
    companentLevel: 1,
    viewtype: viewtype,
    isCollapse: isCollapse,
  };

  let ListRender: any = getListRender(renderProps);
  return <div className={iscolumn ? `edocMenuColumn` : `edocMenu`}>{ListRender}</div>;
};

export const getListRender = (render: any) => {
  const { menu, isRight, inlineCollapsed, showLevel, menustyle, isCollapse } = render;
  let isBasic = false;
  if (menustyle) {
    if (menustyle == 'basic') {
      isBasic = true;
    }
  }
  return menu.val.map((item: MenuType) => {
    // 如果是更多下拉框
    if (item.OutId === 'more') {
      return (
        <PopMenu
          {...item}
          {...render}
          key={item.OutId}
          placement={isRight ? 'rightTop' : 'bottom'}
        />
      );
    }

    const isShowChild = item.IsHaveChild && showLevel?.length > 1;
    const isUnion = item.IsHaveChild && showLevel?.length == 1 && showLevel[0] == '2';
    if (isShowChild || isUnion) {
      if (isBasic && !inlineCollapsed) {
        return (
          <MenuQuickCollapse
            {...item}
            {...render}
            key={item.OutId}
            isCollapse={isCollapse}
            placement={isRight ? 'rightTop' : 'bottom'}
          />
        );
      }

      return (
        <PopMenu
          {...item}
          {...render}
          key={item.OutId}
          placement={isRight ? 'rightTop' : 'bottom'}
        />
      );
    }

    if (isBasic) {
      return <CollMenuHeader {...item} {...render} key={item.OutId} />;
    }

    return <NormalMenu {...item} {...render} key={item.OutId} />;
  });
};

export const getPadding = (menu: MenuType, isRight?: boolean) => {
  let data = 16;
  if (menu.viewtype !== 'horizontal') {
    if (menu.companentLevel == 3) {
      data = 16;
      return data;
    }
    data = menu.companentLevel * 16;
  } else {
    if (menu.companentLevel == 1) {
      data = 16;
    } else {
      data = 16;
    }
  }
  if (menu.isPop || isRight) {
    data = 16;
  }
  return data;
};

export interface IconType {
  type: string;
  size: number;
  color: string;
}

export const NormalMenu = (props: MenuType) => {
  const icon: IconType = tranferIcon(props.Icon) as IconType;
  const hoverDev = props.inlineCollapsed
    ? 'header-dev'
    : props.companentLevel == 1
      ? 'header-dev'
      : 'dev';
  return (
    <div
      className={
        getIsHover(props.JumpRoute) ? `edocMenu-normalItem ${hoverDev}` : 'edocMenu-normalItem'
      }
      onClick={(e) => {
        if (props?.menuOnClick) props.menuOnClick(props, e);
      }}
      style={{
        ...props.style,
        paddingRight: props.inlineCollapsed ? 0 : getPadding(props),
        height: props.companentLevel == 1 ? '44px' : '40px',
        paddingLeft: getPadding(props),
      }}
    >
      {icon.type && (
        <InbizIcon
          type={icon.type}
          style={getIconStyle(icon)}
          className={'edocMenu-normalItem-ico'}
        />
      )}
      <p className="edocMenu-normalItem-tr" title={getMessage(props.DisplayName)}>
        {!props.inlineCollapsed && <TextWidget>{props.DisplayName}</TextWidget>}
      </p>
    </div>
  );
};

export const PopMenu = (props: MenuType) => {
  const requestMenu = useGetMenuTreeEffect();
  const [visible, $visible] = useState(false);
  const [childMenu, $childMenu] = useState<MenuType[]>([]);
  let jumpItem = props;
  const handleVisibleChange = (state: boolean) => {
    if (state === true) {
      if (props.level < 2) {
        h5Utils.inbizPageEvent.emit('popMenuChange', props)
      }
    }
    if (state) {
      //若当前菜单自带子菜单，则只需取子菜单数据即可
      if (props.children || childMenu.length > 0) {
        $visible(state);
        return;
      }
      loadChildList();
      return;
    }
    // $visible(state);
  };

  const content = () => {
    return (
      <div style={{ minWidth: 120 }} onClick={() => {
        $visible(false);
      }}

      >
        {getListRender({
          viewtype: props.viewtype,
          inbizMenu: props.inbizMenu,
          menu: {
            val: props.children ? props.children : childMenu,
            set: $childMenu,
          },
          isRight: true,
          isPop: true,
          iscolumn: props.iscolumn,
          jumpChild: props.jumpChild,
          showLevel: props.showLevel,
          menuOnClick: props.menuOnClick,
          level: props.level ? props.level + 1 : undefined,
          companentLevel: props.companentLevel + 1,
        })}
      </div>
    );
  };

  // 获取子菜单
  const loadChildList = () => {
    requestMenu((res: MenuType[]) => {
      let newRes: MenuType[] = res.map((item) => {
        if (!item.JumpRoute) {
          item.JumpRoute = item.Route;
        }
        item.JumpRoute =
          props.JumpRoute && item.JumpRoute
            ? `${props.JumpRoute}/${item.JumpRoute}`
            : item.JumpRoute;
        return item;
      });
      $childMenu(newRes);
      $visible(true);
    }, props.OutId);
  };

  const icon: IconType = tranferIcon(props.Icon) as IconType;

  //菜单角标切换
  const expanIcoOpen =
    props?.placement == 'rightTop'
      ? props.companentLevel <= 2
        ? 'icon-ic-arrow-right-bold'
        : 'icon-ic-arrow-left-bold'
      : 'icon-ic-arrow-down-bold';
  // const expanIcoClose =
  //   props?.placement == 'rightTop' ? 'icon-ic-arrow-right-bold' : 'icon-ic-arrow-down-bold';
  const hoverDev = props.companentLevel == 1 ? 'header-dev' : 'dev';



  useEffect(() => {
    h5Utils.inbizPageEvent.on('popMenuChange', (item?: any) => {
      if (item && item.OutId !== props.OutId) {
        $visible(false);
      }
    });
    return () => {
      h5Utils.inbizPageEvent.off('popMenuChange');
    };
  }, []);

  const expanIconStyle = {
    transform: visible && expanIcoOpen == 'icon-ic-arrow-down-bold' ? 'rotate(180deg)' : 'rotate(0deg)',
    transition: 'transform 0.5s cubic-bezier(0.09, 1.11, 0.36, 0.95)'
  }

  return (
    <Popover
      // getPopupContainer={(treeNode) => treeNode.parentNode}
      placement={props?.placement}
      content={content}
      trigger="hover"
      visible={visible}
      overlayClassName={
        props.iscolumn ? `edocMenuColumn-popMenu-content` : `edocMenu-popMenu-content`
      }
      getPopupContainer={() => document.body}
      overlayStyle={{
        paddingLeft: 0,
      }}
      autoAdjustOverflow={true}
      arrowPointAtCenter={true}

      onVisibleChange={(state) => {
        if (state === true) {
          h5Utils.inbizPageEvent.emit('popMenuChange', props)
        }
        $visible(state);
      }}
    >
      <div
        className={
          getIsHover(props.JumpRoute) ? `edocMenu-popoverItem ${hoverDev}` : 'edocMenu-popoverItem'
        }
        style={{
          paddingRight: props.inlineCollapsed ? 0 : getPadding(props, true),
          paddingLeft: getPadding(props),
          height: props.companentLevel == 1 ? '44px' : '40px',
        }}
        onClick={() => {
          props.menuOnClick && props.menuOnClick(jumpItem);
        }}
        onMouseEnter={() => {
          handleVisibleChange(true)

        }}
      >
        {icon.type && (
          <InbizIcon
            type={icon.type}
            style={getIconStyle(icon)}
            className={'edocMenu-normalItem-ico'}
          />
        )}
        <p className="edocMenu-normalItem-tr" title={getMessage(props.DisplayName)}>
          {!props.inlineCollapsed && <TextWidget>{props.DisplayName}</TextWidget>}
        </p>
        {!props.inlineCollapsed && props.OutId !== 'more' && (
          <InbizIcon
            style={expanIconStyle}
            type={expanIcoOpen}
            className={'edocMenu-normalItem-expan'}
          />
        )}
      </div>
    </Popover>
  );
};

export const CollMenuHeader = (props: MenuType & { isShowBgColor: boolean }) => {
  const icon: IconType = tranferIcon(props.Icon) as IconType;
  const styleHeader = {};
  const titleHover = getIsHover(props.JumpRoute)
    ? `edocMenu-collMenuHeader ${props.companentLevel == 1 && !props.inlineCollapsed ? 'dev' : 'header-dev'
    } `
    : `edocMenu-collMenuHeader`;

  if (props.isShowBgColor === true) {
    styleHeader['backgroundColor'] = 'transparent';
  }

  return (
    <div
      className={titleHover}
      onClick={(e) => {
        if (props?.menuOnClick) props.menuOnClick(props, e);
      }}
      style={{
        ...props.style,
        height: props.companentLevel == 1 ? '44px' : '40px',
        ...styleHeader,
      }}
    >
      <p
        className="edocMenu-collMenuHeader-tr"
        title={getMessage(props.DisplayName)}
        style={{
          paddingLeft: getPadding(props),
        }}
      >
        {icon.type && (
          <InbizIcon
            type={icon.type}
            style={getIconStyle(icon)}
            className={'edocMenu-collMenuHeader-ico'}
          />
        )}
        {!props.inlineCollapsed && <TextWidget>{props.DisplayName}</TextWidget>}
      </p>
      {!props.inlineCollapsed && props?.isPre && (
        <InbizIcon type={'icon-ic-arrow-down-bold'}
          style={{
            transform: props.visible ? 'rotate(-180deg)' : 'rotate(0deg)',
            transition: 'transform 0.5s cubic-bezier(0.09, 1.11, 0.36, 0.95)'
          }}
          className={'edocMenu-normalItem-expan'} />
      )}
    </div>
  );
};

export const CollMenu = (props: MenuType) => {
  const requestMenu = useGetMenuTreeEffect();
  const [childMenu, $childMenu] = useState<MenuType[]>([]);
  const [visible, $visible] = useState(false);
  const callback = (key: string | string[]) => {
    // 开启状态
    if (key) {
      $visible(true);
      if (props.children || childMenu.length) {
        $visible(true);
        return;
      }
      // $childMenu([{}, {}]);
      loadChildList();
      return;
    } else {
      $visible(false);
    }
  };

  // 获取子菜单
  const loadChildList = () => {
    requestMenu((res: MenuType[]) => {
      let newRes: MenuType[] = res.map((item) => {
        if (!item.JumpRoute) {
          item.JumpRoute = item.Route;
        }
        item.JumpRoute =
          props.JumpRoute && item.JumpRoute
            ? `${props.JumpRoute}/${item.JumpRoute}`
            : item.JumpRoute;
        return item;
      });

      $childMenu(newRes);
    }, props.OutId);
  };

  const childList = props.children ? props.children : childMenu;
  return (
    <Collapse onChange={callback} expandIconPosition="right" accordion ghost={true}>
      <Collapse.Panel
        key={props.OutId}
        showArrow={false}
        header={
          <CollMenuHeader
            {...props}
            visible={visible}
            level={props.level}
            companentLevel={props.companentLevel}
            isPre
          />
        }
      >
        <div style={{ height: childList?.length * 40 }}>
          {getListRender({
            viewtype: props.viewtype,
            inbizMenu: props.inbizMenu,
            menu: {
              val: childList,
              set: $childMenu,
            },
            isRight: true,
            iscolumn: props.iscolumn,
            jumpChild: props.jumpChild,
            showLevel: props.showLevel,
            menuOnClick: props.menuOnClick,
            menustyle: props?.level + 1 > 1 ? 'modal' : 'basic',
            level: props?.level + 1,
            companentLevel: props.companentLevel + 1,
          })}
        </div>
      </Collapse.Panel>
    </Collapse>
  );
};

const MenuQuickCollapse = (props: MenuType) => {
  const requestMenu = useGetMenuTreeEffect();
  const [childMenu, $childMenu] = useState<MenuType[]>([]);
  const [visible, $visible] = useState(false);

  //展开函数
  const openFc = () => {
    if (props.children || childMenu.length) {
      $visible(true);
      if (props.isCollapse) {
        h5Utils.inbizPageEvent.emit('mnuQuickCollapseChange', props);
      }
      return;
    }
    loadChildList();
    return;
  }
  const callback = (key?: string | string[]) => {
    // 开启状态
    if (!visible) {
      openFc()
    } else {
      $visible(false);
    }
  };

  useEffect(() => {
    h5Utils.inbizPageEvent.on('mnuQuickCollapseChange', (item?: any) => {
      if (item && item.OutId !== props.OutId) {
        $visible(false);
      }
    });
    return () => {
      h5Utils.inbizPageEvent.off('mnuQuickCollapseChange');
    };
  }, []);


  useEffect(() => {
    if (getIsHover(props.JumpRoute)) {
      openFc()
    }
  }, [window.location.hash])


  // 获取子菜单
  const loadChildList = () => {
    requestMenu((res: MenuType[]) => {
      let newRes: MenuType[] = res.map((item) => {
        if (!item.JumpRoute) {
          item.JumpRoute = item.Route;
        }
        item.JumpRoute =
          props.JumpRoute && item.JumpRoute
            ? `${props.JumpRoute}/${item.JumpRoute}`
            : item.JumpRoute;
        return item;
      });
      $visible(true);
      $childMenu(newRes);
      if (props.isCollapse) {
        h5Utils.inbizPageEvent.emit('mnuQuickCollapseChange', props);
      }
    }, props.OutId);
  };

  const childList = props.children ? props.children : childMenu;
  return (
    <div>
      <div className="MenuQuickCollapse-header" onClick={callback}>
        <CollMenuHeader
          {...props}
          visible={visible}
          level={props.level}
          isShowBgColor={visible === true && childList.length > 0}
          companentLevel={props.companentLevel}
          isPre
        />
      </div>
      <div className="MenuQuickCollapse-content"
        style={{
          height: visible ? childList?.length * 40 : 0,
          overflow: 'hidden',
          transition: 'height 0.5s cubic-bezier(0.09, 1.11, 0.36, 0.95)'
        }}>
        {getListRender({
          viewtype: props.viewtype,
          inbizMenu: props.inbizMenu,
          menu: {
            val: childList,
            set: $childMenu,
          },
          isRight: true,
          iscolumn: props.iscolumn,
          jumpChild: props.jumpChild,
          showLevel: props.showLevel,
          menuOnClick: props.menuOnClick,
          menustyle: props?.level + 1 > 1 ? 'modal' : 'basic',
          level: props?.level + 1,
          companentLevel: props.companentLevel + 1,
        })}
      </div>
    </div >
  );
};
